var position,
    target,
    tween,
    tweenBack,
    tweenGroup;

//初始化函数
function init() {
    position = { x: 0, y: 0, rotation: 0, scale: 1 };
    target = document.getElementById('div1');
    tweenGroup = new TWEEN.Group()
    tween = new TWEEN.Tween(position, tweenGroup)
            .to({
                x: 700,
                y: 200,
                rotation: 360,
                scale: .3
            })
            .delay(1000)
            .easing(TWEEN.Easing.Elastic.InOut)
            .onUpdate(update)
            .onStop(stop)

    tweenBack = new TWEEN.Tween(position, tweenGroup)
                .to({
                    x: 0,
                    y: 0,
                    rotation: 0,
                    scale: 1
                })
                .delay(1000)
                .easing(TWEEN.Easing.Elastic.InOut)
                .onUpdate(update),

    tween.chain(tweenBack);
    tweenBack.chain(tween);

    tween.start();

    document.getElementById('stop').onclick = function() {
        tweenGroup.removeAll();
    }
}

//动画函数
function animate(tiem) {
    var id = requestAnimationFrame(animate);

    var result = tweenGroup.update(tiem);

    if(!result) cancelAnimationFrame(id);
}

//update函数
function update() {
    target.style.transform = `translate(${position.x}px, ${position.y}px) rotate(${position.rotation}deg) scale(${position.scale})`;
}

//stop函数，在循环中不会执行
function stop() {
    console.log('stop');
}

init();
animate();